<!DOCTYPE html>
<html lang="en">

<head>
    <title>WebAuthn demo</title>
    <link rel="icon" type="image/png" href="/webauthn-logo-icon-32x32.png" sizes="32x32" />
    <link rel="icon" type="image/png" href="/webauthn-logo-icon-16x16.png" sizes="16x16" />
    <!-- Bootstrap -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-webauthn.css" rel="stylesheet">
    <!-- for logo on advanced menu -->
    <link href="css/fontawesome-all.css" rel="stylesheet">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- this can't be a local file - it loads buttons.html which will fail CORS if this is a local JS file -->
    <script src="https://buttons.github.io/buttons.js"></script>

    <style type="text/css">
    .tt-info:hover {
        text-decoration: underline;
    }
    </style>
    <!--[if lt IE 9]>
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

<body>
    <div class="base">
        <div class="content">
            <div class="header-logo visible-desktop">
                <a title="WebAuthn"><img src="/webauthn-logo.png" alt="WebAuthn"></a>
            </div>
            <h1>WebAuthn登录易API演示</h1> 
            <!--
            <p><a class="github-button" href="https://github.com/apowers313/fido2-server-demo/" data-size="large" aria-label="View apowers313/fido2-server-demo on GitHub">View the Source</a></p>
            -->
            <div class="card card-body bg-light" role="tablist">

                <!-- tab header -->
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a href="?tab=register" class="nav-link active" data-target="#register" data-toggle="tab">注册</a>
                    </li>
                    <li class="nav-item">
                        <a href="?tab=login" class="nav-link" data-target="#login" data-toggle="tab">登录</a></li>
                </ul>
                <div class="tab-content">

                    <!-- register tab -->
                    <div class="tab-pane fade show active" role="tabpanel" id="register">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-md-12">
                                    <h2>创建新账号</h2>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <form id="register-form" name="register-form" method="post">
                                        <br>
                                        <input type="text" id="username" name="username" placeholder="用户名" autofocus="autofocus">
                                        <br>
                                        <br>
                                        <input type="submit" id="registerButton" class="btn btn-success" value="注册">
                                    </form>
                                </div>
                                <div class="col-md-6">
                                    <p>输入一个账号并点击“下一步”，初始化“WebAuthn登录易API”的进程。下一步将会提示您用“WebAuthn登录易API”进行注册 --- 无需设置密码！</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- login tab -->
                    <div class="tab-pane fade" role="tabpanel" id="login">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-md-12">
                                    <h2>登录账号</h2>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <form id="login-form" name="login-form" method="post">
                                        <br>
                                        <input type="text" name="username" placeholder="用户名" autofocus="autofocus">
                                        <br>
                                        <br>
                                        <input type="submit" id="loginButton" class="btn btn-success" value="登录">
                                    </form>
                                </div>
                                <div class="col-md-6">
                                    <p>如果您完成了注册，您可以使用左边的表格对自己的身份进行验证。下一步将会被您的“WebAuthn登录易API”的设备进行验证。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- accordion for advanced content -->
            <div id="accordion">
              <div class="card">
                <div class="card-header" id="headingAdvanced">
                  <h5 class="mb-0">
                    <button id="collapseButton" class="btn btn-link" data-toggle="collapse" data-target="#collapseAdvanced" aria-expanded="false" aria-controls="collapseAdvanced">&nbsp;&nbsp;高级
                    </button>
                  </h5>
                </div>
                <div id="collapseAdvanced" class="collapse" aria-labelledby="headingAdvanced" data-parent="#accordion">

                    <!-- debug output text area -->
                    <div id="terminal" contenteditable="true">
                    </div>
                </div>
              </div>
            </div>


            <!-- Modals -->

            <!-- this is the modal that pops up when webauthn is not supported -->
            <div id="notSupportedModal" class="modal" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">“WebAuthn登录易API”不支持</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div id="notSupportedBody" class="modal-body">
                            <p>此配置目前不支持“WebAuthn登录易API”，请确保您使用的是安全的上下文（HTTPS），并且您的浏览器支持“WebAuthn登录易API”</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal">完成</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- this is the user presence modal that pops up to prompt users to "press their button" -->
            <div id="upModal" class="modal" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">完成用户验证</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <p>请在您的核查下完成您的用户验证：</p>
                            <p>如果您有U2F令牌密钥，它应该在闪。否则，请按下您的指纹传感器或按照您的浏览器或操作系统提供的提示操作。</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal">中止</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- this is the modal that shows the final result. the content is controlled by ux-events.js -->
            <div id="resultModal" class="modal" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 id="resultHeader" class="modal-title">完成任何操作</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div id="resultBody" class="modal-body">
                            <p>一些操作通过了或者失败了或者其他情况，结果都会在这里</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal">完成</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/ux-events.js"></script>
    <script src="js/webauthn-simple-app/webauthn-simple-app.js"></script>
</body>

</html>